<template>
	<view>
		<view class="user">
			<!--  头像 -->
			<view class="user-info-box pr" style="height:386upx">
				<image class="pa bg-back" mode="widthFix" src="https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/ui_wode_bg.png"></image>
				<view class="flex pa left40" style="top:120upx">
					<view class="left">
						<image class="user-img border-50" :src="_userInfo.avatarUrl || _gameInfo.photo || '/static/missing-face.png'"></image>
					</view>
					<view class="content margin-left22 dis-flex">
						<view class="bg-back-w">
							<view class="font-size26 color-white margin-bottom15">{{_userInfo.nickName || _gameInfo.nickName || '游客'}}</view>
							<view class="font-size21" style="color:#C7AEFF">{{'用户ID:'+_gameInfo.userId}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="transformZ" style="margin-top:-115upx;">
				<!-- 获取次数 -->
				<view class="margin-left37 margin-right37 margin-bottom20 padding-top53 padding-bottom34 bg-color-white  border-radius10">
					<view class="dis-flex text-center margin-bottom38 line-height">
						<view class="bg-back">
							<view class="font-size26 margin-bottom20">剩余答题次数</view>
							<view class="font-size36 color-red">{{_gameInfo.coupon}}</view>
						</view>
						<view class="bg-back">
							<view class="font-size26 margin-bottom20">已答次数</view>
							<view class="font-size36 color-red">{{_gameInfo.answerCount}}</view>
						</view>
					</view>
					<form report-submit="true" @submit="setFormId" class="dis-flex">
						<button @click="popShow('CPay')" form-type="submit" class="formId-btn dis-flex height87 bg-color-orange border-radius "
						 style="width:356upx">
							<text class="font-size33 line-height color-white">获取次数</text>
						</button>
					</form>
				</view>
				<!-- 我的奖品 -->
				<view class="mc-bg-white">
					<uni-list-item title="我的奖品" thumb="/static/images/ui_wode_liwu.png" @click="navTo('/pages/user/myExchange/myExchange')"></uni-list-item>
					<view class="list-item">
						<uni-list-item title="我的兑奖劵" thumb="/static/images/ui_wode_juan.png" :show-arrow="false"></uni-list-item>
						<view class="mc-flex mc-flex-vcenter list-item-right">
							<image src="../../../static/images/ui_wode_juan02.png" mode="widthFix" class="coupon-icon"></image>
							<text class="mc-g8 ml5">×</text>
							<text class="mc-red">{{_gameInfo.tntegralNum}}</text>
						</view>
					</view>
					<uni-list-item title="我的抽奖" thumb="/static/images/ui_wode_choujiang.png" @click="navTo('/pages/user/myDraw/myDraw')"></uni-list-item>
					<uni-list-item title="我的砍价" thumb="/static/images/ui_wode_kj.png" @click="navTo('/pages/user/myBargain/myBargain')"></uni-list-item>
					<view class="list-item">
						<uni-list-item title="联系客服" thumb="/static/images/ui_wode_kefu.png" :show-arrow="false"></uni-list-item>
						<form report-submit="true" @submit="setFormId" class="mc-flex mc-flex-vcenter list-item-right">
							<!-- <text class="mr15 mc-red">QQ:{{customerNum}}</text> -->
							<button form-type="submit" type="primary" @tap="setClipboardData(customerNum)">添加客服</button>
						</form>
					</view>
					<uni-list-item title="常见问题" thumb="/static/images/ui_wode_changjianwenti.png" @click="navTo('/pages/user/qa/qa')"></uni-list-item>
				</view>
			</view>
		</view>
		<c-pop></c-pop>
		<view style="margin-top:60upx;margin-bottom:30upx">
			<banner-ad></banner-ad>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		uniList,
		uniListItem
	} from '@dcloudio/uni-ui';

	const showToast = title => {
		uni.showToast({
			title: title || '',
			icon: 'none'
		});
	};
	export default {
		name: 'user',
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,

				customerNum: '743914078'
			};
		},
		computed: {
			...mapGetters('user', ['_isLogin', '_gameInfo', '_userInfo'])
		},
		methods: {
			...mapActions('pop', ['popShow']),
			...mapActions('user', ['gameInfoUp']),
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				console.log(url);
				if (!this._isLogin) {
					url = '/pages/authorize/index';
				}
				uni.navigateTo({
					url: url
				});
			},
			setClipboardData(data) {
				this.$store.dispatch('videoAd/show', {
					success: () => {
						uni.setClipboardData({
							data,
							success: function() {
								uni.showModal({
									title: '已复制',
									content: '客服QQ: 743914078',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											// console.log('用户点击确定');
										}
									}
								});
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '播放失败',
							icon: 'none'
						});
					}
				});
			},
			subscribeAppMsg() {
				console.log('canIUse appMsgSubscribed', qq.canIUse('subscribeAppMsg'))
				console.log('getSystemInfoSync appMsgSubscribed', uni.getSystemInfoSync())
				const that = this;
				if (qq.canIUse('subscribeAppMsg'))
					qq.getSetting({
						success(res) {
							if (!res.authSetting['scope.appMsgSubscribed']) {
								new Promise(function(resolve, reject){
									qq.authorize({
										scope: 'scope.appMsgSubscribed',
										success() {
											resolve()
										},
										fail(err) {
											console.log('qq.authorize err', err)
											uni.showModal({
												title: '开启订阅消息',
												content: '小程序需要你授权消息订阅功能，以便我们更好更及时的推送活动消息给您',
												showCancel:false,
												success(res) {
													if (res.confirm) {
														qq.openSetting({
															success(res) {
																console.log(res.authSetting)
																if (res.authSetting['scope.appMsgSubscribed']) {
																	resolve()
																}else{
																	reject()
																}
															}
														})
													}
												}
											})
										}
									})
								}).then(function(){
									// 用户已经同意小程序使用录音功能，后续调用 qq.subscribeAppMsg 接口不会弹窗询问
									qq.subscribeAppMsg({
										subscribe: true,
										success(res) {
											console.log('----subscribeAppMsg----success', res)
											that.$tip.showToast('已开启订阅')
										},
										fail(res) {
											console.log('----subscribeAppMsg----fail', res)
										}
									})
								}).catch(function(err){
									console.log('subscribeAppMsg err', err)
								})
							}
						}
					})
			},
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			}
		},
		onLoad() {
			if (!this._isLogin) {
				uni.reLaunch({
					url: '/pages/authorize/index'
				});
			} else {
				this.subscribeAppMsg()        
			}


			// uni.navigateTo({
			// 	url:'/pages/user/myExchange/myExchange'
			// })
		},
		onShow() {
			this.popShow();
			if (this._isLogin) {
				this.gameInfoUp();
			}
		},
		onNavigationBarButtonTap(e) {},
		onShareAppMessage(res) {
			const num = Math.floor(Math.random() * 6 + 1);
			console.log(num)
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '答题赢Q币和荣耀皮肤，几率极高，快来试试',
				path: '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId,
				imageUrl: 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share' + num + '.jpg'
			};
		}
	};
</script>
<style lang='scss' scoped>
	.user {
		background-color: rgb(228, 228, 228);

		.user-info-box {
			.user-img {
				width: 119upx;
				height: 119upx;
			}
		}
	}

	.list-item {
		position: relative;
	}

	.list-item-right {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 30rpx;
		font-size: 30rpx;
	}

	.coupon-icon {
		width: 25rpx;
		height: 22rpx;
	}
</style>
